<template>
  <div class="measureMorePage">

    <pageLoading v-if="page.loading" :size="600"></pageLoading>

    <div class="measureMore-main" v-if="!page.loading">

      <div class="measureMore-main-note">
        <p>特体数据为非必填项，轻微特体不用填写，不需要每一处都填写！</p>
        <p>明显特殊体型只需填写相应的特体位置，其它地方可以为空！</p>
      </div>

      <div class="measureMore-main-form">

          <pageForm :data="formItem" ref="form"></pageForm>

      </div>

      <bottomBtn @prev="pagePrev" @next="pageNext">
        <button slot="center" class="ivu-btn ivu-btn-diy ivu-btn-large" type="button" @click="skip">
          <span>跳过</span>
        </button>
      </bottomBtn>

      <Modal
        v-model="modal.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncOK">
        <h2>
          是否确认选择？
        </h2>
      </Modal>

      <Modal
        v-model="modal1.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncSkip">
        <h2>
          是否确认跳过？
        </h2>
      </Modal>

    </div>

  </div>
</template>

<script>
  import {isSame} from "common/js/utils";
  import {mapMutations, mapState} from 'vuex';
  import {getmeasureMore} from "api/getmeasureMore"

  import bottomBtn from "base/bottomBtn.vue";
  import pageLoading from "base/pageLoading";
  import pageForm from "base/pageform";

  export default {
    props: {},
    data() {
      return {
        page: {
          loading: true,
        },
        formItem:[],
        modal:{
          state:false
        },
        modal1:{
          state:false
        }
      }
    },
    methods: {
      ...mapMutations({
        "setNavIndex": 'SET_NAVINDEX',
        "setMeasureMore":"SET_MEASUREMORE"
      }),
      pagePrev() {
        this.setNavIndex(this.navIndex - 1);
      },
      pageNext(){
        !this.$refs.form.vaildForm()?this.$Notice.info({title: '错误', desc:'表单未通过,此表单为非必需表单为空不验证'}):this.modal.state = true;
      },
      asyncOK(){
         this.setNavIndex(this.navIndex + 1);
         this.setMeasureMore(this.$refs.form.normalizeForm())
      },
      skip(){
        this.modal1.state = true
      },
      asyncSkip(){
        this.setNavIndex(this.navIndex + 1);
      },
      _getList() {
        this.page.loading = true;
        getmeasureMore({id: this.type,goods:this.goodsId,lining:this.liningId,stereotype:this.stereotype,designData:this.designData,measureData:this.measureData}).then((Rs) => {
          this.page.loading = false;
          this.formItem = Rs.data;
        }).catch((error)=>{
          this.setNavIndex(1);
        })
      },
      _jugeData(){
        if(this.measureData === ""){
          this.pagePrev();
        }
      },
    },
    components: {
      bottomBtn,
      pageLoading,
      pageForm
    },
    computed: {
      ...mapState([
        'type',
        'goodsId',
        'navIndex',
        'liningId',
        "stereotype",
        'designData',
        'measureData'
      ])
    },
    mounted() {

    },
    updated(){

    },
    created() {
      this._getList();
    },
    activated(){
      this._jugeData();
    },
    deactivated(){

    },
    watch:{
       measureData(newValue, oldval){
        // 不相等获得数据
        if(!isSame(newValue, oldval)){
          this._getList();
          this.setMeasureMore("");
        }
      }
    }
  }
</script>

<style lang="less">
  @import "../../common/style/helpers/mixins.less";

  .measureMorePage{

    .measureMore-main-note{
        padding: 20px;
        p{
          font-size: 16px;
          letter-spacing: 1px;
          color: #9e2828;
          .omit();
       }
    }
    .measureMore-main-form{

      .ivu-form-item-label{
        text-align: center;
        font-size: 14px;
      }

      .ivu-form-item-content{
        .clearfix();
      }
    }
    .content-page{
      text-align: center;
    }
  }

</style>
